<template>
  <div class="user-container">
    <!-- 顶部 -->
    <div class="info-box">
      <van-image
        class="my-image"
        round
        width="100"
        height="100"
        :src="userInfo.photo"
      />
      <h2 class="name">
        {{ userInfo.name }}
        <br />
        <van-tag color="#ffe1e1" text-color="#ad0000" type="primary">{{
          userInfo.birthday
        }}</van-tag>
      </h2>
    </div>
    <!--中间栏  -->
    <van-row class="my-control-box">
      <van-col class="my-col" span="8">
        <van-icon class="my-icon my" name="newspaper-o" />我的作品</van-col
      >
      <van-col class="my-col" span="8">
        <van-icon class="my-icon star" name="star-o" />我的收藏</van-col
      >
      <van-col class="my-col" span="8">
        <van-icon class="my-icon history" name="tosend" />阅读历史</van-col
      >
    </van-row>
    <van-cell-group>
      <van-cell title="编辑资料" icon="edit" to="/edit" is-link />
      <van-cell title="小智同学" icon="chat-o" to="/student" is-link />
      <van-cell title="系统设置" icon="setting-o" is-link />
      <van-cell title="退出登录" icon="warning-o" is-link @click="logout" />
    </van-cell-group>
  </div>
</template>

<script>
// import { getUserInfo } from '../api/user.js'
import { removeToken } from '../until/token.js'
import { mapState } from 'vuex'
export default {
  name: 'my',
  data () {
    return {
      // 用户信息
      // userinfo: {}
    }
  },
  methods: {
    logout () {
      this.$dialog
        .confirm({
          title: '友情提示^_^',
          message: '你真的要登出了吗(╥╯^╰╥)'
        })
        .then(() => {
          // on confirm
          // 点击确认
          // console.log('then')
          removeToken()
          // 清除用户信息
          // this.userinfo = {}
          // 跳转页面
          this.$router.push({ path: '/index' })
        })
        .catch(() => {
          // on cancel
          // 点击取消
          console.log('catch')
        })
    }
  },
  created () {
    // getUserInfo().then(res => {
    //   console.log('res:', res)
    //   this.userinfo = res.data.data
    // })
  },
  computed: {
    ...mapState(['userInfo'])
  }

  // computed: {
  //   userinfo () {
  //     return this.$store.state.userInfo
  //   }
  // }
}
</script>

<style lang="less">
.user-container {
  .info-box {
    height: 100px;
    background-color: #3296fa;
    display: flex;
    padding-left: 18px;
    // 从 弹性布局 左边开始
    justify-content: flex-start;
    align-items: center;
    .my-image {
      width: 60px;
      height: 60px;
      margin-right: 5px;
    }
    .name {
      color: white;
      font-size: 15px;
      font-weight: normal;
    }
  }
  .my-control-box {
    padding: 20px 0px;
    border: 1px solid #ccc;
    .my-col {
      font-size: 12px;
      text-align: center;
    }
    .my-icon {
      font-size: 28px;
      display: block;
    }
    &.my {
      color: #77aaff;
    }
    &.star {
      color: #ff0000;
    }
    &.history {
      color: #ffaa00;
    }
  }
  // 分组cell
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
  // ---------------------
}
</style>
